<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">

      <!-- 待清理订单 -->

      <el-tab-pane label="待清理订单" name="two">
        <el-table :data="page.records" style="width: 100%" id="id">

          <el-table-column prop="id" label="订单编号" width="140">
          </el-table-column>

          <el-table-column prop="createTime" label="创建时间" width="140">
          </el-table-column>

          <el-table-column prop="name" label="预约人姓名" width="140">
          </el-table-column>

          <el-table-column prop="phone" label="预约人电话" width="150">
          </el-table-column>

          <el-table-column prop="address" label="预约人地址" width="150">
          </el-table-column>


          <el-table-column fixed="right" align="center" label="操作" width="200">
            <template slot-scope="scope">
              <el-button @click="transferBoolIsShow(scope.row.id)" type="warning"
                size="small">
                转单</el-button>
              <el-button type="primary" size="small" @click="detailBoolTrue(scope.row.id)">
                确认订单详情
              </el-button>
            </template>
          </el-table-column>

        </el-table>
        <div>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.current"
            :page-sizes="[1, 3, 5]" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper"
            :total="page.total">
          </el-pagination>
        </div>
       <!-- <el-dialog title="订单确认详情" :visible.sync="detailBool" width="60%">
          <el-table :data="detail.details" style="width: 100%" id="id" >
            <el-table-column prop="singlePrice" label="废品单类价格" width="140">
            </el-table-column>
            <el-table-column prop="number" label="数量" width="140">
            </el-table-column>
          </el-table>
        </el-dialog> -->
        <el-dialog
          title="订单确认详情"
          :visible.sync="detailBool"
          width="45%"
          >
          <el-table :data="detail.details" style="width: 100%"  id="orderNum">
             <el-table-column prop="junkType" label="废品种类" width="180px">
             </el-table-column>
             <el-table-column prop="singlePrice" label="废品单类价格" width="100px">
             </el-table-column>
             <el-table-column prop="number" label="数量" width="100px">
             </el-table-column>

           </el-table>
            <el-button type="primary" @click="showUpdateImage=true">上传图片</el-button>
            <el-button type="primary" @click="addDetailBool=true">新增详情</el-button>
            <el-button type="primary" @click="queryDetailForm">确 定</el-button>
            <el-button @click="detailBool=false">取 消</el-button>
        </el-dialog>



        <el-dialog title="新增订单详情"
          :visible.sync= "addDetailBool"
          width="45%">

          <el-select v-model="addDetail.junkType" placeholder="请选择废品类别">
            <el-option
            v-for="p in typeDetails"
            :key="p.typeId"
            :label="p.typeName"
            :value="p.typeId"
            ></el-option><br>
          </el-select>
          废品单类价格：<el-input type="text" v-model="addDetail.singlePrice" ></el-input><br>
          数量：<el-input type="text" v-model="addDetail.number" ></el-input>
          <el-button type="primary" @click="addDetailIndetail()">新增</el-button>

          <el-button @click="addDetailBool=false">取 消</el-button>
        </el-dialog>



        <el-dialog title="上传图片" :visible.sync="showUpdateImage" width="35%">
           上传图片：
           <el-upload class="upload-demo" :headers="headers" :on-success="addImage"  name="image" ref="upload"
             action="http://192.168.0.110:9001/order/tOrder/uploadImage"  :auto-upload="false">

             <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
             <el-button style="margin-left: 10px;" size="small" type="success"
               @click="updateDoctorImage()">立即添加</el-button>
             <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
           </el-upload>
         </el-dialog>
      </el-tab-pane>

      <!-- 已完成订单 -->

      <el-tab-pane label="已完成订单" name="three">
        <el-table :data="page.records" style="width: 100%" id="id">

          <el-table-column prop="id" label="订单编号" width="140">
          </el-table-column>

          <el-table-column prop="createTime" label="创建时间" width="140">
          </el-table-column>

          <el-table-column prop="name" label="预约人姓名" width="140">
          </el-table-column>

          <el-table-column prop="phone" label="预约人电话" width="150">
          </el-table-column>

          <el-table-column prop="address" label="预约人地址" width="150">
          </el-table-column>


          <el-table-column fixed="right" align="center" label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="overDetailBoolIsTrue(scope.row.id)">
                查看订单详情
              </el-button>
            </template>
          </el-table-column>

        </el-table>
        <div>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.current"
            :page-sizes="[1, 3, 5]" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper"
            :total="page.total">
          </el-pagination>
        </div>
      </el-tab-pane>

    </el-tabs>
    <el-dialog title="转单申请" :visible.sync="transferBool" width="50%" :before-close="handleClose">

      转单原因：<el-input type="textarea"  :rows="5" v-model="transferDetailForm.reason" ></el-input>

      <el-button @click="transferBool=false">取 消</el-button>
      <el-button @click="transferOrder()" type="primary">确定转单</el-button>
    </el-dialog>
    <el-dialog
      title="已完成订单确认详情"
      :visible.sync="overDetailBool"
      width="55%"
      >
      <el-table :data="overDetail" style="width: 100%"  id="id">
         <el-table-column prop="junkType" label="废品种类id" width="180px">
         </el-table-column>
         <el-table-column prop="singlePrice" label="废品单类价格" width="100px">
         </el-table-column>
         <el-table-column prop="number" label="数量" width="100px">
         </el-table-column>
         <el-table-column prop="totalPrice" label="单类总价" width="100px">
         </el-table-column>

       </el-table>
        <el-button type="primary" @click="overDetailBool=false">确 定</el-button>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    name: "EmployeeOrder",
    data() {
      return {
        //已完成订单详情
        overDetail:{},
        //已完成订单详情窗口
        overDetailBool:false,
        //上传图片
        showUpdateImage:false,
        //查询员工订单的查询对象
        findOrderPageForm: {},
        //查询结果返回对象
        page:{},
        //默认卡片id
        activeName: 'two',
        //垃圾类别详情
        typeDetails:{},
        //转单弹窗布尔值
        transferBool:false,
        //订单详情
        detail:{
          details:[],
          orderNum:"",
          image:""
        },
        //新增订单详情
        addDetail:{},
        //订单详情布尔值
        detailBool:false,
        //新增订单详情布尔值
        addDetailBool:false,
        //转单详情form
        transferDetailForm:{},
        //上传图片携带请求头
        headers:{}
      }
    },
    methods: {
      overDetailBoolIsTrue(orderNum){
        this.$http.get("/order/orderDetails/selectAllOrderDetailByOrderId/"+orderNum).then(resp=>{
          console.log(resp)
          if(resp.data.code==200){
            this.overDetail=resp.data.data
            this.overDetailBool=true
          }else{
            this.open4(resp.data.message)
          }
        })
        this.overDetailBool=true
      },
      //确认新增订单详情
      queryDetailForm(){
        console.log(this.detail)
        this.$http.post("/order/orderDetails/employeeQuery",this.detail).then(resp=>{
          console.log(resp)
          if(resp.data.code=="200"){
            this.findemployOrder()
            this.detailBool=false
          }else{
            this.open4(resp.data.message)
          }
        })
      },
      //上传图片成功回调
      addImage(resp){
        this.detail.image=resp.data
        console.log(this.detail)
      },
      //向详情form里面添加数据
      addDetailIndetail(){
         if (this.addDetail.junkType != null && this.addDetail.singlePrice != null && this.addDetail.number != null) {
                  let set = this.detail.details;
                  set.push({ ...this.addDetail });
                  this.detail.details = set;
                  this.$message({
                    message: '新增成功',
                    type: 'success'
                  });
                  this.addDetail = {};
                  this.addDetailBool = false;
                } else {
                  this.$message.error('请完整填写信息');
                }
      },
      //上传图片
      updateDoctorImage() {
        this.$refs.upload.submit();

        // this.findUserInfo();

         this.showUpdateImage = false
      },
      //显示订单添加详情窗口
      detailBoolTrue(orderNum){
        this.detailBool=true
        this.detail.orderNum=orderNum
      },
      //员工转单
      transferOrder() {
        this.$http.post("/order/changeDetails/employeeTransfers", this.transferDetailForm).then(resp => {
          if (resp.data.code == 200) {
            this.open2(resp.data.message)
            this.transferBool = false;
            this.transferDetailForm={}
            this.findemployOrder()
          } else {
            this.open4(resp.data.message)
          }
        })
      },
      //显现转单弹窗
      transferBoolIsShow(id){
        this.transferDetailForm.orderNum=id
        this.transferBool=true
      },
      selectAllJunkType(){
        this.$http.get("/depot/junkType/checkJunkType").then(resp=>{
          if (resp.data.code == 200) {
            this.typeDetails=resp.data.data
          } else {
            this.open4(resp.data.message)
          }
        })
      },
      //根据状态分页查询
      findemployOrder() {
        this.$http.post("/order/tOrder/findStateOrder", this.findOrderPageForm).then(resp => {
          if (resp.data.code === 200) {
            this.page = resp.data.data;
          } else {
            this.$message.error(resp.data.message);
          }
        });
      },
      //卡片切换方法
      handleClick(tab, event) {
        if(tab.name=='two'){
          this.findOrderPageForm.stateId=4
          this.findemployOrder()
        }else if(tab.name=='three'){
          this.findOrderPageForm.stateId=5
          this.findemployOrder()
        }else{
          this.findOrderPageForm.stateId=9
          this.findemployOrder()
        }

      },


      //每页个数查询
      handleSizeChange(val) {
        this.findOrderPageForm.pageSize = val
        this.findemployOrder()
      },
      //页码查询
      handleCurrentChange(val) {
        this.findOrderPageForm.pageNum = val
        this.findemployOrder()
      },
      //成功通知
      open2(obj) {
        this.$message({
          message: obj,
          type: 'success'
        });
      },
      //失败通知
      open4(obj) {
        this.$message.error(obj);
      },
      //关闭弹窗
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }

    },
    created() {
      this.findOrderPageForm.stateId = 4
      this.findemployOrder()
      this.selectAllJunkType()
      this.headers["token"]=localStorage.getItem("token");
    }
  }
</script>

<style scoped>
</style>
